<script setup lang="ts">
  import { ref, onMounted, computed } from 'vue';
  import * as Lodash from 'lodash';
  import SubTitle from '@/components/sub-title/index.vue';
  // import ImgData from '@/components/img-data/index.vue';
  import TextData from '@/components/text-data/index.vue';
  import ScrollTable from '@/views/big-screen/scroll-table.vue';
  import useECharts from '@/hooks/useECharts';
  import {
    updateAxisData,
    updateOptions,
    updateGraphic,
  } from '@/utils/echarts_util';
  import { dataHomecare } from './data';
  import {
    ChartStaffOptions,
    ChartServicedDisabilityOptions,
    ChartStaffLevelOptions,
    ChartServiceTimeOptions,
    ChartServiceSortOptions,
    ChartServiceTop10Options,
  } from './options';

  const inserviceColumns = [
    {
      title: '长者姓名',
      dataIndex: 'elderName',
    },
    {
      title: '服务人员',
      dataIndex: 'staffName',
    },
    {
      title: '服务开始时间',
      dataIndex: 'serviceStartAt',
    },
    {
      title: '已服务时长',
      dataIndex: 'serviceTime',
    },
  ];

  const dataOverview = ref(Lodash.cloneDeep(dataHomecare.overview));
  const dataSumStat = ref(Lodash.cloneDeep(dataHomecare.sumStat));
  const dataStaffLevel = ref(dataSumStat.value.staffLevel);
  const dataStaff = ref(dataSumStat.value.staff);
  const dataInService = ref(Lodash.cloneDeep(dataHomecare.inService));
  const dataStat = ref(Lodash.cloneDeep(dataHomecare.dataStat));
  const dateServiceRecord = ref(Lodash.cloneDeep(dataStat.value.serviceRecord));
  const dataServiceTime = ref(dataStat.value.serviceTime);
  const dataServiceSort = ref(dataStat.value.serviceSort);
  const dataServiceItem = ref(dataStat.value.serviceItem);

  const currentServiceRecord = computed(() => {
    return dateServiceRecord.value.today;
  });
  const currentInService = ref(dataHomecare.inService.serviceInfo);

  const chartStaff = ref();
  const chartStaffLevel0 = ref();
  const chartStaffLevel1 = ref();
  const chartStaffLevel2 = ref();
  const chartServicedDisability = ref();
  const chartServiceTime = ref();
  const chartServiceSort = ref();
  const chartServiceTop10 = ref();

  const { setOptions: setStaffOptions } = useECharts(chartStaff);
  const { setOptions: setStaffLevel0Options } = useECharts(chartStaffLevel0);
  const { setOptions: setStaffLevel1Options } = useECharts(chartStaffLevel1);
  const { setOptions: setStaffLevel2Options } = useECharts(chartStaffLevel2);
  const { setOptions: setServicedDisabilityOptions } = useECharts(
    chartServicedDisability
  );
  const { setOptions: setServiceTimeOptions } = useECharts(chartServiceTime);
  const { setOptions: setServiceSortOptions } = useECharts(chartServiceSort);
  const { setOptions: setServiceTop10Options } = useECharts(chartServiceTop10);

  const renderStaff = () => {
    const chartStaffOptions = Lodash.cloneDeep(ChartStaffOptions);
    setStaffOptions(
      updateOptions(
        {
          ...chartStaffOptions,
          graphic: updateGraphic(
            chartStaffOptions.graphic,
            [dataStaff.value[0].name, dataStaff.value[0].value],
            '#00F9FF'
          ),
        },
        [Lodash.tail(dataStaff.value)]
      )
    );
  };

  const renderStafLevels = () => {
    for (let i = 0; i < dataStaffLevel.value.length; i += 1) {
      const levelItem = dataStaffLevel.value[i];
      let func: any = null;
      let legend: any = null;
      if (i === 0) {
        func = setStaffLevel0Options;
      } else if (i === 1) {
        func = setStaffLevel1Options;
      } else if (i === 2) {
        func = setStaffLevel2Options;
        legend = ChartStaffLevelOptions.legend;
      } else {
        return;
      }
      func(
        updateOptions(
          {
            ...ChartStaffLevelOptions,
            legend,
            graphic: updateGraphic(
              ChartStaffLevelOptions.graphic,
              [levelItem.levels[0].name, levelItem.levels[0].value],
              '#FFF'
            ),
          },
          [Lodash.tail(levelItem.levels)]
        )
      );
    }
  };

  const renderServicedDisability = () => {
    const data = dataSumStat.value.serviceElderDisability;
    const data0 = data.map((item) => {
      return {
        name: item.name,
        value: item.male,
      };
    });
    const data1 = data.map((item) => {
      return {
        name: item.name,
        value: item.female,
      };
    });
    setServicedDisabilityOptions(
      updateOptions(
        updateAxisData(ChartServicedDisabilityOptions, data0, 'yAxis'),
        [data0, data1]
      )
    );
  };

  const handleClickServiceInfoClose = () => {
    console.log('handleClickServiceInfoClose:', currentInService.value);
  };

  onMounted(() => {
    //
    renderStaff();
    //
    renderStafLevels();
    // 被服务长者失能等级
    renderServicedDisability();
    //
    setServiceTimeOptions(
      updateOptions(
        updateAxisData(ChartServiceTimeOptions, dataServiceTime.value, 'xAxis'),
        [dataServiceTime.value]
      )
    );
    //
    setServiceSortOptions(
      updateOptions(ChartServiceSortOptions, [dataServiceSort.value])
    );
    //
    setServiceTop10Options(
      updateOptions(
        updateAxisData(
          ChartServiceTop10Options,
          dataServiceItem.value,
          'xAxis'
        ),
        [dataServiceItem.value]
      )
    );
  });
</script>

<template>
  <div class="vls-homecare flex">
    <div class="vls-homecare-item vls-homecare-left w-[30%] border-light">
      <SubTitle title="服务综合统计" />
      <div class="vls-homecare-items flex-col">
        <!-- 服务人员 -->
        <div
          class="vls-homecare-item vls-homecare-staff"
          style="margin-top: 2vh"
        >
          <div class="title color-light">服务人员</div>
          <div class="vls-homecare-item-data flex">
            <div class="staff-data">
              <TextData
                style="width: 140px; padding: 15px 0"
                bg="bg1"
                name="服务人员总人数"
                value-color="#c280ff"
                :value="dataSumStat.staff[0].value"
              />
            </div>
            <div ref="chartStaff" class="w-full h-[18vh]"></div>
          </div>
        </div>
        <!-- 服务人员等级占比 -->
        <div class="vls-homecare-item vls-homecare-level">
          <div class="title color-light">服务人员等级占比</div>
          <div class="vls-homecare-item-data" style="padding-top: 0">
            <div class="homecare-levels flex">
              <div ref="chartStaffLevel0" class="w-[30%] h-[16vh]"></div>
              <div ref="chartStaffLevel1" class="w-[30%] h-[16vh]"></div>
              <div ref="chartStaffLevel2" class="w-[30%] h-[16vh]"></div>
            </div>
            <div class="level-names flex">
              <div
                v-for="(item, index) of dataStaffLevel"
                :key="'lv_name-' + index"
                class="level-name"
              >
                <div class="name-border"></div>
                <span>{{ item.staff }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 被服务长者人数 -->
        <div
          class="vls-homecare-item vls-homecare-elder-count"
          style="margin-top: 2vh"
        >
          <div class="title color-light">被服务长者人数</div>
          <div class="vls-homecare-item-data flex">
            <TextData
              style="width: 45%; padding: 15px 0"
              bg="bg1"
              name="当前服务中长者数"
              value-color="#c280ff"
              :value="dataSumStat.serviceElder.inServiceElder"
            />
            <TextData
              style="width: 45%; padding: 15px 0"
              bg="bg1"
              name="累计服务总人数"
              value-color="#c280ff"
              :value="dataSumStat.serviceElder.totalService"
            />
            <!-- <div ref="chartDeviceType" class="w-full h-[20vh]"></div> -->
          </div>
        </div>
        <!-- 被服务长者失能等级 -->
        <div
          class="vls-homecare-item vls-homecare-disability"
          style="margin-top: 2vh"
        >
          <div class="title color-light">被服务长者失能等级</div>
          <div class="vls-homecare-item-data flex">
            <div ref="chartServicedDisability" class="w-full h-[18vh]"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="vls-homecare-item vls-homecare-center border-light">
      <!-- 服务概览 -->
      <div class="vls-homecare-ov flex">
        <TextData
          style="font-family: ''"
          bg="bg1"
          name="服务长者总数"
          :reverse="true"
          value-color="#FFF"
          :value="dataOverview.totalServiceElder"
        />
        <TextData
          style=""
          bg="bg1"
          name="服务人员数量"
          :reverse="true"
          value-color="#FFF"
          :value="dataOverview.staffCount"
        />
        <TextData
          style=""
          bg="bg1"
          name="累计服务次数"
          :reverse="true"
          value-color="#FFF"
          :value="dataOverview.totalService"
        />
        <TextData
          style=""
          bg="bg1"
          name="累计服务项目数"
          :reverse="true"
          value-color="#FFF"
          :value="dataOverview.totalServiceItem"
        />
      </div>
      <!-- 当前进行中服务 -->
      <div class="vls-homecare-hotmap">
        <SubTitle title="当前进行中服务" />
        <div class="flex" style="margin-top: 20px">
          <div class="vls-homecare-hm-map"></div>
          <div class="vls-homecare-hm-info">
            <div
              class="vls-hmi-top flex"
              style="justify-content: space-between"
            >
              <div class="top-title" style="color: #00f9ff">服务信息</div>
              <div class="top-close">
                <icon-close
                  style="color: #aaa; cursor: pointer"
                  @click="handleClickServiceInfoClose"
                />
              </div>
            </div>
            <div class="vls-hmi-elder vls-hmi-item">
              <div class="label">老人</div>
              <div class="base">
                <span>{{ currentInService.elderName }}</span>
                <span style="margin-left: 30px">
                  <span>{{ currentInService.elderGender }}</span>
                  <span style="margin-left: 6px"
                    >{{ currentInService.elderAge }}岁</span
                  >
                </span>
              </div>
            </div>
            <div class="vls-hmi-staff vls-hmi-item">
              <div class="label">护理员</div>
              <div class="base">
                <div>{{ currentInService.staffName }}</div>
                <div>{{ currentInService.staffPhone }}</div>
              </div>
            </div>
            <div class="vls-hmi-starttime vls-hmi-item">
              <div class="label">服务开始时间</div>
              <div class="base">{{ currentInService.serviceStartAt }}</div>
            </div>
            <div class="vls-hmi-time vls-hmi-item">
              <div class="label">已服务时长</div>
              <div class="base">{{ currentInService.serviceTime }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 进行中服务 -->
      <div
        class="vls-homecare-item vls-homecare-inservice"
        style="margin-top: 2vh"
      >
        <div class="title color-light">进行中服务</div>
        <div class="vls-inservice-item-data" style="padding-top: 1vh">
          <ScrollTable
            size="small"
            :columns="inserviceColumns"
            :data="dataInService.inServices"
            :height="120"
          />
        </div>
      </div>
    </div>
    <div class="vls-homecare-item vls-homecare-right w-[30%] border-light">
      <SubTitle title="服务数据统计" />
      <!-- 服务记录概况 -->
      <div
        class="vls-homecare-item vls-homecare-service-ov"
        style="margin-top: 2vh"
      >
        <div class="title color-light">服务记录概况</div>
        <div class="vls-isov-item-data flex" style="padding-top: 1vh">
          <TextData
            style="width: 30%; padding: 15px 0"
            :reverse="true"
            name="服务总次数"
            :value="currentServiceRecord.totalServiceCount"
          />
          <TextData
            style="width: 30%; padding: 15px 0"
            :reverse="true"
            name="服务项目总数"
            :value="currentServiceRecord.totalServiceItem"
          />
          <TextData
            style="width: 30%; padding: 15px 0"
            :reverse="true"
            name="服务总时长"
            :value="currentServiceRecord.totalServiceTime"
          />
        </div>
      </div>
      <!-- 单次服务时长分布 -->
      <div
        class="vls-homecare-item vls-homecare-service-time"
        style="margin-top: 2vh"
      >
        <div class="title color-light">单次服务时长分布</div>
        <div class="vls-istime-item-data" style="padding-top: 1vh">
          <div ref="chartServiceTime" class="w-full h-[16vh]"></div>
        </div>
      </div>
      <!-- 服务分类占比 -->
      <div
        class="vls-homecare-item vls-homecare-service-sort"
        style="margin-top: 2vh"
      >
        <div class="title color-light">服务分类占比</div>
        <div class="vls-issort-item-data" style="padding-top: 1vh">
          <div ref="chartServiceSort" class="w-full h-[16vh]"></div>
        </div>
      </div>
      <!-- 服务项目数量排名（TOP10） -->
      <div
        class="vls-homecare-item vls-homecare-service-top10"
        style="margin-top: 2vh"
      >
        <div class="title color-light">服务项目数量排名（TOP10）</div>
        <div class="vls-istop10-item-data" style="padding-top: 1vh">
          <div ref="chartServiceTop10" class="w-full h-[20vh]"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .vls-homecare {
    column-gap: 30px;
  }

  .vls-homecare-items {
    flex: 1;
    justify-content: space-between;

    .vls-homecare-item {
      .vls-homecare-item-data {
        padding: 1vh 10px 0 10px;
      }
    }
  }

  .vls-homecare-left {
    .vls-homecare-level {
      .homecare-levels {
        // justify-content: space-between;
        div {
          flex: 1;
        }
      }

      .level-names {
        margin-top: 0.5vh;
        // justify-content: space-between;

        .level-name {
          flex: 1;
          text-align: center;

          .name-border {
            margin: 0 auto;
            width: 70%;
            height: 1px;
            // border-radius: 50%;
            background: linear-gradient(
              to right,
              transparent,
              #00f9ff 50%,
              transparent
            );
          }
        }
      }
    }

    .vls-homecare-elder-count {
      .vls-homecare-item-data {
        padding: 2vh 12% 0 12%;
        justify-content: space-between;
        // column-gap: 2vw;
      }
    }
  }

  .vls-homecare-center {
    flex: 1;

    .vls-homecare-ov {
      column-gap: 20px;
      justify-content: space-between;
      margin-bottom: 1vh;
    }

    .vls-homecare-hotmap {
      position: relative;

      .vls-homecare-hm-map {
        flex: 1;
      }

      .vls-homecare-hm-info {
        background-color: #000;
        border: 1px solid #00f9ff;
        border-radius: 4px;
        padding: 10px 10px;
        display: flex;
        flex-direction: column;
        row-gap: 10px;

        .vls-hmi-item {
          .label {
            color: #aaaaaa;
            font-size: 13px;
          }

          .base {
            margin-top: 4px;
          }
        }
      }
    }
  }

  .vls-homecare-right {
    .vls-homecare-service-ov {
      .vls-isov-item-data {
        padding: 0 5%;
        justify-content: space-around;
      }
    }
  }
</style>
